﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Css.aspx.cs" Inherits="Views_Css" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript" src="../ViewModels/Css.js"></script>
    <style type="text/css">
        .Class1 {
            color: maroon;
            font-weight:bold;
        }
        .Class2 {
            color: green;
            text-decoration: line-through;
        }        
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <h3>CSS</h3>
    <span>The css binding adds or removes one or more named CSS classes to the associated DOM element. </span>
    <div>
        <div class="code">
<xmp>
<div data-bind="css: {Class1: applyClass < 12, 
                Class2: applyClass >= 12} ">
    If this is morning time, Class1 is applied. Otherwise Class2.
</div>
</xmp>
        </div>        
        Class1 : color - maroon, font-weight:bold<br />
        Class2 : color - green, text-decoration:line-through<br />        
        <h4>Result</h4>
        <div data-bind="css: {Class1: applyClass < 12, Class2: applyClass >= 12} ">If this is morning time, Class1 is applied. Otherwise Class2. </div>
    </div>
</asp:Content>

